<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" id="checkAll" v-model="isChangeAll" />
    </label>
    <span>
      已完成 <span id="allComplateTodos">{{ isCheckedNum }}</span> /全部
      <span id="allTodos">{{ todoListLength }}</span>
    </span>
    <button id="removeAllComplate" class="btn btn-danger" @click="removeAll">
      清除已完成任务
    </button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  methods:{
    removeAll(){
      this.$bus.$emit("removeAll")
    }
  },
  props: {
    isCheckedNum: Number,
    todoListLength: Number,
  },
  computed: {
    isChangeAll: {
      get() {
        return this.isCheckedNum === this.todoListLength && this.todoListLength > 0;
      },
      set(value) {
        return this.$bus.$emit("changeAll", value);
      },
    },
  },
};
</script>

<style>
</style>